<template>
	<view style="background-color: #fff;">
		<fui-sticky>
			<!-- #ifdef H5 -->
			<fui-nav-bar title="余额明细" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
			<!-- #endif -->
			
		</fui-sticky>
		<view class="bald-bg">
			<view class="">
				今日收益
			</view>
			<view style="font-size: 50rpx;font-weight: 900;padding: 32rpx;">
				{{data?.dayIncome||0}}
			</view>
			<view class="ballist">
				<view class="balitem">
					<view class="bal_num">
						{{data?.allIncome||0}}
					</view>
					<view class="bal_text">
						累计收益
					</view>
				</view>
				<view class="balitem">
					<view class="bal_num">
						{{data?.monthIncome||0}}
					</view>
					<view class="bal_text">
						本月收益
					</view>
				</view>
				<view class="balitem">
					<view class="bal_num">
						{{data?.allwithdraw||0}}
					</view>
					<view class="bal_text">
						累计提现
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			
			<!-- #ifdef APP-PLUS -->
			<fui-sticky>
				<fui-tabs center style="margin-top: 30rpx;" :current="current" :tabs="tabs" @change="change"></fui-tabs>
			</fui-sticky>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<fui-sticky top="44">
				<fui-tabs center style="margin-top: 30rpx;" :current="current" :tabs="tabs" @change="change"></fui-tabs>
			</fui-sticky>
			<!-- #endif -->
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<fui-list>
					<fui-list-cell :highlight="false" v-for="item in goods" :key="item.order_id">
						<view style="display: flex;flex-direction: column;justify-content: center;">
							<text>{{item.description}}</text>
							<text style="margin-top: 10rpx;font-size: 26rpx;color: #7F7F7F;">{{formatDate(item.create_date)}}</text>
							<text v-if="item.reason" style="margin-top: 10rpx;font-size: 26rpx;color: #FF2B2B;">失败原因: {{item.reason}}</text>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: right;">
							<text style="text-align: right;" :style="{color:getColor(item.incomeType,item)}">{{(item?.incomeType?'+':'-')+item.amount}}</text>
							<text style="text-align: center;margin-top: 10rpx;font-size: 26rpx;color:#7F7F7F">{{getType(item.status)}}</text>
						</view>
					</fui-list-cell>
				</fui-list>
			</mescroll-body>
		</view>
	</view>
</template>

<script setup>
	import {formatDate} from "@/utils/index.js"
	const qcGlobalApi = uniCloud.importObject('qc-global',{
		customUI: true // 取消自动展示的交互提示界面
	})
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import { ref, reactive,computed} from 'vue'
	import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
	import { LoginStore } from "@/store/modules/login.js";
	const userInfo = computed(() => (LoginStore().userInfo))
	
	const data = ref({})
	onLoad(async()=>{
		const res = await qcGlobalApi.statisticsUserLog({user_id:userInfo?.value._id})
		data.value = res.data
	})
	
	//成功或失败的字体颜色
	const getColor = (e,item)=>{
			if(e){
				return "#09BE4F"
			}else{
				return "#FF2B2B"
			}
	}
	//状态转文字
	const getType = (e)=>{
		if(e==0){
			return "成功"
		}else if(e==1){
			return "进行中"
		}else{
			return "失败"
		}
	}
	
	//提现列表
	const goods = ref([])
	// 分页
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const upCallback = async(mescroll) => {
		try {
			let params
			if(current.value==0){
				params = {
					user_id: userInfo?.value?._id,
					pageNum: mescroll.num,
					pageSize: mescroll.size,
					type:""
				}
			}else{
				params = {
					user_id: userInfo?.value?._id,
					pageNum: mescroll.num,
					pageSize: mescroll.size,
					type:current.value-1
				}
			}
			
			const res = await qcGlobalApi.getMoneylog(params)
			const curPageData = res.data || [] // 当前页数据
			if (mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
			goods.value = goods.value.concat(curPageData); //追加新数据
			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总页数)
		} catch (e) {
			mescroll.endErr(); // 请求失败, 结束加载
		}
	}
	
	let tabs = ['全部', '收益', '充值','提现', '其他']
	let current = ref(0)
	
	//切换tabs
	const change = (e)=>{
		current.value = e.index
		goods.value = []
		getMescroll().resetUpScroll()
	}
	// #ifdef H5
	function leftClick() {
		uni.navigateBack()
	}
	// #endif
	
</script>

<style lang="scss" scoped>
	.bald-bg{
		border-radius: 20rpx;
		width: 92vw;
		padding: 32rpx;
		background: url('@/static/image/my/moneyBg.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
		background-size: 100% 100%;
	}
	.scss{
		color: var(--fui-color-success);
	}
	.err{
		color: var(--fui-color-danger);
	}
	.fui-text__explain {
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
	}

	.box {
		background-color: #fff;
	}

	.ballist {
		display: flex;
		justify-content: space-between;
	}

	.balitem {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bal_num {
		padding: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.bal_text {
		color: var(--fui-color-subtitle);
		font-size: 28rpx;
	}
</style>